<template>
  <div class="container">
    <div class="navLink">
      <div class="list">
        <dl
          class="item"
          v-for="(item, index) in navLink"
          :key="index"
          @click="handleNavClick(item)"
        >
          <dt>
            <el-icon size="14">
              <component :is="item.icon" />
            </el-icon>
          </dt>
          <dd>{{ item.name }}</dd>
        </dl>
      </div>
    </div>
    <div class="vTable">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/route/index";
import { getCategoryTreeList } from "@/api/index";
const themeColor = ref(null);
themeColor.value = localStorage.getItem("themeColor");
const navLink = reactive([
  { name: "产品列表", icon: "List", action: "list" },
  { name: "添加产品", icon: "Plus", action: "add" },
  { name: "删除产品", icon: "Delete", action: "delete" },
]);
const data = reactive({
  tableData: [],
});
getCategoryTreeList().then((res) => {
  if (res.code == 200) {
    data.tableData = res.data;
  }
});
const handleNavClick = (item) => {
  if (item.action === "add") {
    router.push({ name: "productAdd" });
  }else if (item.action === "list") {
    router.push({ name: "productList" });
  }
};
</script>

<style lang="less" scoped>
.container {
  flex-grow: 1;
  overflow-y: auto;
  .navLink {
    display: flex;
    .list {
      display: flex;
      gap: 10px;
      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        background: var(--bs-light-color);
        padding: 6px 14px;
        border: var(--bs-border-color) 1px solid;
        cursor: pointer;
        gap: 4px;
        border-radius: 3px;
        dt {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }
}
.vTable {
  padding-top: 14px;
}
</style>